<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="60%"
    @close="handleClose"
  >
    <el-form
      ref="operatorForm"
      :model="formData"
      label-width="120px"
      size="small"
      :rules="rules"
    >
      <!-- 算子基本信息 -->
      <el-form-item label="算子名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入算子名称"></el-input>
      </el-form-item>
      <el-form-item label="算子类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择算子类型" style="width: 100%;">
          <el-option
            v-for="type in operatorTypes"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="处理方式" prop="processingMethod">
        <el-select v-model="formData.processingMethod" placeholder="请选择处理方式" style="width: 100%;">
          <el-option
            v-for="method in processingMethods"
            :key="method.value"
            :label="method.label"
            :value="method.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" :rows="4" v-model="formData.description" placeholder="请输入算子描述"></el-input>
      </el-form-item>

      <!-- 根据处理方式选择输入方式 -->
      <el-form-item label="内容" prop="content">
        <template v-if="formData.processingMethod === 'Script'">
          <vue2-ace-editor
            v-model="formData.content"
            lang="javascript"
            theme="github"
            :options="editorOptions"
            width="100%"
            height="300px"
          />
        </template>
        <template v-else>
          <el-input type="textarea" :rows="6" v-model="formData.content" placeholder="请输入算子内容"></el-input>
        </template>
      </el-form-item>

      <!-- 处理能力配置按钮 -->
      <div style="margin-bottom: 20px;">
        <el-button @click="handleFieldExtraction">字段提取</el-button>
        <el-button @click="handleFieldTransformation">字段转换</el-button>
        <el-button @click="handleDataMasking">数据脱敏</el-button>
        <el-button @click="handleDataCleaning">数据清洗</el-button>
        <el-button @click="handleDataMapping">数据映射</el-button>
      </div>

      <!-- 处理结果展示 -->
      <el-form-item label="处理结果" prop="processingResult">
        <el-input type="textarea" :rows="6" v-model="formData.processingResult" readonly placeholder="处理结果将显示在此处"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Vue2AceEditor from 'vue2-ace-editor';
import 'brace/ext/language_tools'; // 加载语言工具扩展
import 'brace/mode/javascript'; // 加载JS模式
import 'brace/theme/github'; // 加载GitHub主题

export default {
  name: "OperatorEditor",
  components: { Vue2AceEditor },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    dialogTitle: {
      type: String,
      required: true
    },
    formData: {
      type: Object,
      required: true
    },
    operatorTypes: {
      type: Array,
      required: true
    },
    processingMethods: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入算子名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择算子类型', trigger: 'change' }
        ],
        processingMethod: [
          { required: true, message: '请选择处理方式', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入算子描述', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入算子内容', trigger: 'blur' }
        ]
      },
      editorOptions: {
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        enableSnippets: true,
        showLineNumbers: true,
        tabSize: 2,
        useWorker: false // 禁用worker以避免潜在问题
      }
    };
  },
  methods: {
    handleClose() {
      this.$refs.operatorForm.resetFields();
      this.$emit('update:visible', false);
    },
    handleSubmit() {
      this.$refs.operatorForm.validate((valid) => {
        if (valid) {
          this.$emit('submit', { ...this.formData });
          this.handleClose();
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    handleFieldExtraction() {
      this.processData('fieldExtraction');
    },
    handleFieldTransformation() {
      this.processData('fieldTransformation');
    },
    handleDataMasking() {
      this.processData('dataMasking');
    },
    handleDataCleaning() {
      this.processData('dataCleaning');
    },
    handleDataMapping() {
      this.processData('dataMapping');
    },
    processData(operation) {
      let result = '';
      switch (operation) {
        case 'fieldExtraction':
          result = this.extractFields(this.formData.content);
          break;
        case 'fieldTransformation':
          result = this.transformFields(this.formData.content);
          break;
        case 'dataMasking':
          result = this.maskData(this.formData.content);
          break;
        case 'dataCleaning':
          result = this.cleanData(this.formData.content);
          break;
        case 'dataMapping':
          result = this.mapData(this.formData.content);
          break;
        default:
          break;
      }
      this.formData.processingResult = result;
    },
    extractFields(content) {
      // 示例逻辑：简单的字段提取，实际应用中需要根据具体需求实现
      return content.split('\n').map(line => line.split(':')[0]).join('\n');
    },
    transformFields(content) {
      // 示例逻辑：简单的字段转换，实际应用中需要根据具体需求实现
      return content.toUpperCase();
    },
    maskData(content) {
      // 示例逻辑：简单的数据脱敏，实际应用中需要根据具体需求实现
      return content.replace(/\d/g, '*');
    },
    cleanData(content) {
      // 示例逻辑：简单的数据清洗，实际应用中需要根据具体需求实现
      return content.replace(/\s+/g, ' ').trim();
    },
    mapData(content) {
      // 示例逻辑：简单的数据映射，实际应用中需要根据具体需求实现
      const mapping = { key1: 'valueA', key2: 'valueB' };
      return content.split('\n').map(line => {
        const [key, value] = line.split(':');
        return `${key}:${mapping[key.trim()] || value}`;
      }).join('\n');
    }
  }
};
</script>

<style scoped>
/* 如果需要自定义样式，可以在这里添加 */
</style>
